<template>
  <div>
    <mt-header fixed style="background:#242D36;color:#fff;">
      <div slot="left"><i class="iconfont icon-Filter" @click="leftbtn" style="width:.6rem;height: .6rem;font-size: .6rem;"></i></div>
      <div slot="right">
        <!-- 语言下拉框 -->
      <!-- <select class="mui-h5 select_header">
				<option value="zh">{{$t('lang.zh')}}</option>
				<option value="en">{{$t('lang.en')}}</option>
			</select> -->

      </div>
    </mt-header>
    <div class="main_page">
      <div class="slide_header">
        <!-- 轮播图 -->
        <img src='../assets/slide.jpg' style="width: 100%; border-radius: 10px;">
        <!-- <swiper style="min-height: 100px;" :options="swiperOption">
          <swiper-slide style="padding: 0 3%;">
            <img src='../assets/slide.jpg' style="width: 94%; border-radius: 10px; height: auto;">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper> -->
      </div>
      <div class="nav_header">
        <div @click="userlogin($t('optional'))" :class="selected == $t('optional') ? 'active' : ''">{{$t('optional')}}</div>
        <div @click="selected = $t('all')" :class="selected == $t('all') ? 'active' : ''">{{$t('all')}}</div>
        <div @click="userlogin($t('deal'))" :class="selected == $t('deal') ? 'active' : ''">{{$t('deal')}}</div>
      </div>
      <div class="tab_list">
        <div v-if="selected == $t('all')"><applist></applist></div>
        <div v-if="selected == $t('optional')"><optional></optional></div>
        <div v-if="selected == $t('deal')"><openposition></openposition></div>
      </div>
    </div>
    <!-- 左滑 -->
    <div v-if="isleft" class="isleft">
      <div class="right_text" style="width:70%;height:100%;background: #242D36;opacity: .9;border-right: 1px solid #222;">
        <p>{{$t('main_menu')}}</p>
        <div @click="realname">
          <img src="../assets/denglu.png" alt="" />
          <span>{{$t('real_identity')}}</span>
        </div>
        <!-- <div @click="optional()">
          <img src="../assets/shezhi.png" alt="" />
          <span>管理自选合约</span>
        </div> -->
        <div @click="mingxi">
          <img src="../assets/zijinxq.png" alt="" />
          <span>{{$t('fund_detail')}}</span>
        </div>
        <div @click="gonggaolist">
          <img src="../assets/zixuan.png" alt="" />
          <span>{{$t('notification')}}</span>
        </div>
        <div @click="changepwd">
          <img src="../assets/xiugai.png" alt="" />
          <span>{{$t('change_password')}}</span>
        </div>
        <div @click="money">
          <img src="../assets/tianjia.png" alt="" />
          <span>{{$t('recharge_withdraw')}}</span>
        </div>
        <div @click="changeLanguage">
          <img src="../assets/zixun.png" alt="" />
          <span>{{$t('change_language')}}</span>
        </div>
        <div @click="on()">
          <img src="../assets/guanyu.png" alt="" />
          <span>{{$t('about')}}</span>
        </div>
        <div @click="logout">
          <img src="../assets/tuichu.png" alt="" />
          <span>{{$t('logout')}}</span>
        </div>
      </div>
      <div style="width:30%;height: 100%;opacity: 0;" @click="isleft = false"></div>
    </div>
    <div class="looding2" v-if="!loginbtn2">{{$t('site_is_closed')}}</div>
    <div class="commonFooter">
      <commonFooter action="index"></commonFooter>
    </div>
  </div>

</template>

<script>
import { mapState } from 'vuex';
import commonFooter from '../components/commapp/footer';
export default {
  computed: mapState({
    loginbrn: state => state.loginbrn /* 站点开关 */
  }),
  data() {
    return {
      loginbtn2: true,
      selected: this.$t('all'),
      isleft: false,
    };
  },
  watch: {
    loginbrn(val) {
      if (val == false) {
        this.loginbtn2 = false;
      } else {
        this.loginbtn2 = true;
      }
    }
  },
  components: {
    commonFooter, //  底部导航
    applist: resolve => {
      require(['@/components/commapp/applist.vue'], resolve); //全部
    },
    optional: resolve => {
      require(['@/components/commapp/optional.vue'], resolve); //自选
    },
    openposition: resolve => {
      require(['@/components/commapp/openposition.vue'], resolve); //交易
    },
  },
  mounted() {},
  methods: {
    // 左侧按钮
    leftbtn() {
      if (this.$svcInvoke.config._token) {
        return (this.isleft = true);
      } else {
        if (localStorage.getItem('_token')) {
          this.$svcInvoke.setConf('_token', localStorage.getItem('_token'));
          return (this.isleft = true);
        } else {
          return this.$router.push({ path: '/' });
        }
      }
    },
    // 自选/交易按钮
    userlogin(itemname) {
      if (this.$svcInvoke.config._token) {
        return (this.selected = itemname);
      } else {
        if (localStorage.getItem('_token')) {
          this.$svcInvoke.setConf('_token', localStorage.getItem('_token'));
          return (this.selected = itemname);
        } else {
          return this.$router.push({ path: '/' });
        }
      }
    },
    // 实名
    realname() {
      this.$router.push({ path: 'realname' });
    },
    /* 通知公告*/
    gonggaolist() {
      this.$router.push({ path: 'gonggao' });
    },
    changepwd() {
      this.$router.push({ path: 'changepwd' });
    },
    money() {
      this.$router.push({ path: 'chongzhi' });
    },
    mingxi() {
      this.$router.push({ path: 'mingxi' });
    },
    optional() {
      this.$router.push({ path: 'optional' });
    },
    on() {
      this.$router.push({ path: 'on' });
    },
    profit() {
      this.$router.push({ path: 'profit' });
    },
    login() {
      this.$svcInvoke.setConf('_token', '');
      localStorage.removeItem('_token');
      this.$router.push({ path: '/' });
    },
    logout() {
      //退出登录
      this.$svcInvoke.setConf('_token', '');
      localStorage.removeItem('_token');
      this.$router.push({ path: '/' });
    },
    changeLanguage(){
      //切换语言
      console.log('changlanguage');
      var target = localStorage.getItem('locale') == 'zh' ? 'en' : 'zh';
      localStorage.setItem('locale',target)
      this.$i18n.locale = localStorage.getItem('locale')
      //重新选择主页面
      this.userlogin(this.$t('all'))
    }
  }
};
</script>

<style scoped="scoped">

.looding2 {
  position: fixed;
  top: 0rem;
  left: 0rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  width: 100vw;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
}
.main_page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: #fff;
  background: #242d36;
  box-sizing: border-box;
  padding-top: 1rem;
}
.main_page .tab_list {
  width: 100%;
}
/* 轮播图占据26%位置 */
.slide_header {
  padding: 0 3%;
  height: 26%;
}
.select_header {
  align-items: center;
  /* height: 1rem; */
  justify-content: center;
  font-size: 0.3rem;
  color: #ccd2dc;
  /* z-index: 99; */
  margin:auto;
  background: none;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
}
/* 头部文字 */
.nav_header {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 20vw;
  width: 60vw;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1rem;
  box-sizing: border-box;
}
.nav_header > div {
  padding: 0rem 0.45rem;
  font-size: 0.3rem;
  color: #ccd2dc;
}
.nav_header .active {
  color: #fff;
  font-size: 0.4rem;
  font-weight: 600;
}
/* 左滑菜单 */
.isleft {
  position: absolute;
  top: 0;
  left: 0;
  right: ;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}
.right_text > p {
  width: 100%;
  height: 1rem;
  color: #fff;
  text-align: center;
  line-height: 1rem;
  letter-spacing: 1px;
  font-size: 0.4rem;
  border-bottom: 1px solid #222;
}

.right_text > div {
  width: 100%;
  height: 1rem;
  color: #fff;
  letter-spacing: 3px;
  font-size: 0.35rem;
  padding: 0.2rem 0.1rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.right_text > div img {
  width: 0.6rem;
  height: 0.6rem;
  vertical-align: middle;
  margin: 0 0.2rem;
}
</style>
